import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Space, Button, Tooltip, Select } from "antd";
import { useEffect } from "react";
import { useTable } from "@/hooks/useTable";
import { useFormDialog } from "@/hooks/useForm";
import CloudTable from "@/component/CloudTable";
import { page, del, batDel, save, edit, findSegment } from "@/views/attendance/shift/api";
import { STATUS_ENUMS } from "@/views/attendance/shift/data";
import ShiftForm from './form/ShiftForm';
import dayjs from 'dayjs';

const Shift = () => {

    const onShiftFormCallback = (model) => {
        model?.segments?.forEach(each => {
            each.startTime = dayjs(each.workTime[0]).format('HH:mm:ss');
            each.endTime = dayjs(each.workTime[1]).format('HH:mm:ss');
            each.workTime = [each.startTime, each.endTime];
            
            if (each.restTime?.length > 0) {
                each.restStartTime = dayjs(each.restTime[0]).format('HH:mm:ss');
                each.restEndTime = dayjs(each.restTime[1]).format('HH:mm:ss');
                each.restTime = [each.restStartTime, each.restEndTime];
            }
        });
        shiftForm.onSubmit(model, shiftTable.onReload);
    }

    // 表单操作
    const shiftForm = useFormDialog({
        width: 515,
        save: save,
        edit: edit,
        callback: onShiftFormCallback,
    });

    const shiftTools = () => {
        return (
            <Space>
                <Button type="primary" onClick={() => shiftForm.isOpenDialog(undefined, '新增')}>新增</Button>
                <Button type='dashed' style={{ color: 'red' }} onClick={() => shiftTable.onBatchRemove(shiftTable.selected)}>删除</Button>
            </Space>
        );
    }

    const shiftColumns = [
        {
            title: '#',
            key: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            render: (val, record, index) => {
                return index + 1;
            }
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '简称',
            dataIndex: 'shortName',
            key: 'shortName',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '颜色',
            dataIndex: 'color',
            key: 'color',
            ellipsis: true,
            search: 'default',
        },
        // {
        //     title: '工作时间',
        //     dataIndex: 'workTime',
        //     key: 'workTime',
        //     ellipsis: true,
        //     search: 'date',
        // },
        // {
        //     title: '休息时间',
        //     dataIndex: 'restTime',
        //     key: 'restTime',
        //     ellipsis: true,
        //     search: 'date',
        // },
        // {
        //     title: '工作时长(h)',
        //     dataIndex: 'duration',
        //     key: 'duration',
        //     ellipsis: true,
        //     search: 'default',
        // },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 'auto',
            ellipsis: true,
            search: 'default',
        },

        {
            title: '状态',
            dataIndex: 'status',
            width: 100,
            key: 'status',
            render: (val) => STATUS_ENUMS[val] || ''
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 100,
            align: 'center',
            fixed: 'right',
            render: (val, row) => {
                return (
                    <div>
                        <Tooltip title="编辑">
                            <Button type="text" size="small" icon={<EditOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => onEditShiftForm(row)} />
                        </Tooltip>
                        <Tooltip title="删除">
                            <Button type="text" size="small" icon={<DeleteOutlined />} style={{ margin: '0 4px', color: 'red' }} onClick={() => shiftTable.onRemove(val)} />
                        </Tooltip>
                    </div>
                )
            }
        }
    ];

    const shiftTable = useTable({
        reload: page,
        remove: del,
        batchRemove: batDel,
        tools: shiftTools,
        columns: shiftColumns,
    });

    const onEditShiftForm = (row) => {
        let query = {
            params: [{
                field: 'shiftId',
                value: row.id
            }]
        }
        findSegment(query).then(resp => {
            let result = resp?.data || [];
            result.forEach(each => {
                each.workTime = [dayjs(each.startTime, 'HH:mm:ss'), dayjs(each.endTime, 'HH:mm:ss')];
                each.restTime = [dayjs(each.restStartTime, 'HH:mm:ss'), dayjs(each.restEndTime, 'HH:mm:ss')];
            })

            let model = {
                ...row,
                segments: result,
            }
            shiftForm.isOpenDialog(model, '编辑');
        });
    }

    useEffect(() => {
        shiftTable.onReload();
    }, []);

    return (
        <>
            <CloudTable props={shiftTable} />
            <ShiftForm props={shiftForm} />
        </>
    );
}

export default Shift;